<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { Navigation, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";

export default defineComponent({
  name: "solution-top-swiper",
  title: "Solution Top Swiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: ["swiperData"],
  setup(props) {
    const topSwiperData = ref() as any;
    topSwiperData.value = props.swiperData;
    watch(
      () => props.swiperData,
      (val: any) => {
        topSwiperData.value = val;
      }
    );
    return {
      topSwiperData,
      modules: [Navigation, Autoplay],
    };
  },
});
</script>

<template>
  <swiper class="headerRight" :modules="modules" :slides-per-view="1" :space-between="30" :navigation="{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }" :loop="true" :autoplay="{
  delay: 5000,
  stopOnLastSlide: false,
  disableOnInteraction: false,
}" :pagination="{ clickable: true }">
    <swiper-slide class="slide" v-for="item in topSwiperData" :key="item">
      <div class="slideCtn">
        <img :src="item.url" alt="" v-if="item.url.slice(item.url.length - 3) == 'jpg' ||
          item.url.slice(item.length - 3) == 'png'
          " />
        <video :src="item.url" v-else></video>
      </div>
    </swiper-slide>
    <div class="swiper-button-prev">
      <i class="iconfont icon-xiangyou21-01"></i>
    </div>
    <div class="swiper-button-next">
      <i class="iconfont icon-xiangyou-01"></i>
    </div>
  </swiper>
</template>
<style lang="scss" scoped>
.headerRight {
  flex: 1;
  height: auto;
  border-radius: 20px;

  .slideCtn {
    width: 100%;
    height: 400px;
    object-fit: cover;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 50px;
    height: 50px;

    &::after {
      font-size: 0px;
      background-color: #fff;
      color: #6e6e73;
      padding: 0;
      border-radius: 50px;
    }

    .iconfont {
      color: #fff;
      font-size: 50px;
    }
  }
}

@media screen and (max-width: 768px) {
  .headerRight {
    width: 100%;
    border-radius: 8px;

    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;

      &::after {
        font-size: 0px;
        background-color: #fff;
        color: #6e6e73;
        padding: 0;
        border-radius: 50px;
      }

      .iconfont {
        color: #fff;
        font-size: 40px;
      }
    }

    .slideCtn {
      height: 238px;

      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
      }
    }
  }
}
</style>